<template>
  <div class='home'>
    <!-- 滚动视图，显示所有分类 -->
    <van-tabs color="#000" line-width="60px" line-height="5px">
      <van-tab
        v-for="category in categories"
        :title="category.name"
        :key="category.id"
      ></van-tab>
    </van-tabs>

    <!-- 渲染轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <img v-lazy="banner.imageUrl" :style="{width: '100%', height: '100%'}" />
      </van-swipe-item>
    </van-swipe>

    <!-- 渲染推荐爆款商品 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我是有底线滴"
      @load="onLoad"
    >
      <van-card
        v-for="product in products"
        :key="product.id"
        :thumb="product.image"
        @click="jumpToDetail(product.id)"
      >
        <template v-slot:title>
          <div class="van-card__title van-ellipsis">{{product.title}}</div>
        </template>
        <template #desc>
          <div class="prod-rank-tag">{{ product.dataoke.rankingTag }}</div>
          <div class="prod-rank-daily">全天热卖 NO.{{ product.dataoke.dailyRanking }}</div>
        </template>
        <template #tags>
          <span class="prod-price">￥{{ product.price | money }}</span>
          <span class="prod-origin-price">原价：￥{{ product.originPrice | money }}</span>
        </template>
        <template #price>
          <van-tag plain type="danger">{{ product.couponValue || '特价精选' }}</van-tag>
        </template>
        <template #num>
          <span>月销量 {{ product.dataoke.monthSales | saleNum }}</span>
          <van-button type="danger" size="mini" @click.stop="handleAddToCart(product)">加入购物车</van-button>
        </template>
      </van-card>
    </van-list>

    <back-top />
    <button class="back" v-back-top>回去</button>
  </div>
</template>

<script>
import { getAllCategories } from '@/api/category'
import { getBanners, getBaokuan } from '@/api/home'

export default {
  name: 'Home',
  data() {
    return {
      categories: [], // 保存所有的分类
      banners: [], // 轮播图数组
      products: [], // 爆款商品数组
      nextIndex: 0, // 长列表下一页查询的起始索引
      loading: false, // 长列表是否正在加载数据
      finished: false, // 长列表是否已将所有数据加载完毕
    }
  },
  created() {
    console.log('created...')
    // 查询所有分类数据
    getAllCategories()
      .then(data => {
        // console.log('分类：', data)
        this.categories = data.list
      })
      .catch(console.log)
    // 查询轮播图数据
    getBanners()
      .then(data => {
        // console.log('轮播图：', data)
        this.banners = data
      })
      .catch(console.log)
    // // 查询爆款商品
    // getBaokuan()
    //   .then(data => {
    //     console.log('商品：', data)
    //     this.products = data.list
    //   })
    //   .catch(console.log)
  },
  activated() {
    console.log('Home 组件激活...')
  },
  deactivated() {
    console.log('Home 组件失活...')
  },
  beforeDestroy() {
    console.log('before destroy...')
  },
  filters: { // 局部定义过滤器
    // 销量超过 10000，则格式化显示 x.x万，否则原样显示
    saleNum: val => val >= 10000 ? (val / 10000).toFixed(1) + '万' : val,
    // saleNum: val => {
    //   if (val >= 10000) {
    //     return (val / 10000).toFixed(1) + '万'
    //   }
    //   return val
    // },
  },
  methods: {
    // 长列表触底，触发该方法调用，加载数据
    onLoad() {
      // 查询爆款商品
      getBaokuan(this.nextIndex)
        .then(data => {
          // console.log('商品：', data)
          // 更新数据，将当前页查询出的数据追加到原有商品数组末尾
          this.products = [
            ...this.products,
            ...data.list,
          ]
          this.nextIndex = data.nextIndex
          // 数据更新完毕，设置 loading 为 false
          this.loading = false
          // 所有数据是否加载结束
          this.finished = data.isEnd
        })
        .catch(console.log)
    },
    // 跳转到详情页面
    jumpToDetail(id) {
      this.$router.push('/detail/' + id)
    },
    // 处理加入购物车
    handleAddToCart(product) {
      console.log('加入购物车:', product)
      const { id, title, image, price } = product
      // 构建当前选购商品对象的结构
      const current = {
        id,
        title,
        image,
        price,
        amount: 1, // 默认选购数量为 1
      }
      // 保存到 store 的 state 中（修改 store 中的 state）
      // mutation 方法不能直接被调用到，而是需要使用 store
      // 来提交（store.commit(mutationType, payload)）
      this.$store.commit('addToCart', current)
      // 提示加入购物车成功
      this.$toast({
        type: 'success',
        message: '加入成功',
        duration: 1000,
      })
    },
  },
}
</script>

<style lang='less' scoped>
  .container {
    display: flex;

    .left, .right {
      width: 375px;
      height: 100px;
      font-size: 24px;
      background: #ccc;
    }

    .right {
      background: #ff0;
    }
  }

  .prod-rank-tag {
    width: fit-content;
    padding: 6px 12px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(92deg,#ff5201,#fa8c16);
  }
  .prod-rank-daily {
    color: #faad14;
  }
  .prod-price {
    padding: 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: #f00;
  }
  .prod-origin-price {
    padding: 0 12px;
    color: #ccc;
    text-decoration: line-through;
  }

  .back {
    position: fixed;
    left: 20px;
    bottom: 200px;
  }
</style>
